<template>
 <!-- 欠费 - 日、月看板 -->
  <div class="board-content">
    <board-title title="欠费" bgclass="bg-qf">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_qf.png" />
    </board-title>
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else class="board-qf-content" @click="openPerson">
      <div class="board-qf-info">
        <div class="board-qf-total">
          <div class="item-total">
            <img src="~@/assets/imgs/publicline/board/icon-qf-total.png" />
            <div class="total">
              <div class="value">{{ info.QF_VALUE || 0 }}<span class="unit">万元</span></div>
              <div class="title">总欠费</div>
            </div>
          </div>
        </div>
      </div>
      <div class="board-qf-other">
        <div class="other-item">
          <div class="title">移网欠费</div>
          <div class="value">{{ info.YWQF_VALUE || 0 }}<span class="unit">万元</span></div>
        </div>
        <div class="other-item">
          <div class="title">固网欠费</div>
          <div class="value">{{ info.GWQF_VALUE || 0 }}<span class="unit">万元</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import boardTitle from '@/views/components/publicline/board/title.vue'
import { morningDayArrear, morningMonthArrear } from '@/api/publicline/board.js'

export default {
  components: { boardTitle },
  props: {
    flag: {
      type: Boolean,
      require: false,
      default: true
    }
  },
  data() {
    return {
      isLoading: true,
      info: { },
      queryParams: {}
    }
  },
  methods: {
    getMorningArrear(params) {
      if(this.flag) {
        this.getMorningDayArrear(params)
      }
      if (!this.flag) {
        this.getMorningMonthArrear(params)
      }
    },
    // 晨会看板-日看板-欠费
    async getMorningDayArrear(params) {
      this.isLoading = true
      this.queryParams = params
      const res = await morningDayArrear(params)
      const { result, success } = res
      if (success) {
        this.info = result[0] || {}
        this.isLoading = false
      }
    },
    // 晨会看板-月看板-欠费
    async getMorningMonthArrear(params) {
      this.isLoading = true
      this.queryParams = params
      const res = await morningMonthArrear(params)
      const { result, success } = res
      if (success) {
        this.info = result[0] || {}
        this.isLoading = false
      }
    },
    openPerson() {
      if(this.flag) {
        this.$open.call(this, '/publicline/board/arrear-list',
          {
            ...this.queryParams,
            value: this.info.QF_VALUE || 0
          }
        )
      }
      if(!this.flag) {
        this.$open.call(this, '/publicline/board/monthPersonal',
          {
            monthId: this.queryParams.monthId,
            type: 'arrear',
            value: this.info.QF_VALUE || 0
          }
        )
      }
    }
  }
}
</script>
<style lang="less" scoped>
.board-qf-content {
  background: #fff;
  padding: 0 16px;
  .board-qf-info {
    .board-qf-total {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-top: 12px;
      padding-bottom: 12px;
      .item-total {
        width: 50%;
        img {
          width: 45px;
          vertical-align: bottom;
        }
        .total {
          margin-left: 16px;
          display: inline-block;
        }
        .value {
          font-size: 28px;
          color: #5466FA;
        }
        .unit {
          font-size: 14px;
        }
        .title {
          font-size: 12px;
        }
      }
    }
  }
  .board-qf-other {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    border-top: 1px solid #F3F7FA;
    padding-bottom: 10px;
    .other-item {
      margin-top: 12px;
      width: 48%;
      .title {
        color: #333;
      }
      .value {
        font-size: 19px;
        color: #333;
        margin-top: 6px;
      }
      .unit {
        font-size: 14px;
        color: #151515;
      }
    }
  }
}
</style>
